<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--
1.插槽的基本使用,<slot></slot>
2.插槽的默认值,<slot>button</slot>
3.如果有多个值,同时放进组件,一起替换
4.若使有多个插槽,应该对插槽命名 <slot name="slotName"></slot> ,使用的时候根据 slot="slotName" 标签操作对于的插槽
-->
<!--  <cpn1>-->
<!--    <button>按钮</button>-->
<!--  </cpn1>-->
<!--  <cpn1><p>哈哈哈哈哈哈哈哈哈哈</p></cpn1>-->
<!--  <cpn1>-->
<!--    <div>我是div元素</div>-->
<!--    <p>我是p元素</p>-->
<!--  </cpn1>-->
  <cpn1><span slot="left">aaaaaaa</span></cpn1>
  <cpn1></cpn1>
  <cpn1></cpn1>
</div>
</body>
<!--&lt;!&ndash; script标签写模版 &ndash;&gt;-->
<!--<script type="text/x-template" id="cpn">-->
<!--  <div>-->
<!--    <h2>我是标题</h2>-->
<!--    <p>我是内容,哈哈哈哈哈</p>-->
<!--    <p>我是内容,呵呵呵呵呵呵</p>-->
<!--  </div>-->
<!--</script>-->
<!-- template标签写模版 -->
<template id="cpn">
  <div>
    <h2>{{tittle}}</h2>
    <p>我是内容,哈哈哈哈哈</p>
    <p>我是内容,呵呵呵呵呵呵</p>
    <slot><button>按钮1</button></slot><!-- slot 插头,用于自定义拼接模块,中间若是带了模块,则是默认模块 -->
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  // 语法糖写全局组件
  Vue.component("cpn1", {
    template: "#cpn",
    data() {// 组件里的data是函数,这个函数返回对象,对象里存放数据
      return {
        tittle: "abc",
      }
    },
  });

  // 语法糖写局部组件
  var app = new Vue({
    el: "#app",
    components: {}
  });
</script>
</html>